<?php
	$frm_user = $this->frmUser;
	$frm_change_pass = $this->frmChangePass;
	$profile = $this->profile;
?>

<div class="block">
	<div class="title">
		<span>Thông tin cá nhân</span>
	</div>
	<div class="content">
		<div class="frm-info">
			<script type="text/javascript">
				$(document).ready(function() {
					var imgUrl = '<?php echo $this->baseUrl(PUBLIC_IMG_URL . "/tmp"); ?>';
					$('#thumbnail').attr("src", '<?php echo $this->baseUrl(PUBLIC_IMG_URL . "/user/user/avatars/" . $profile->hinh_anh); ?>');
						
				  	$('#inputupload').uploadify({
				    	'swf'  				: '<?php echo $this->baseUrl(PUBLIC_PATH . "/scripts/uploadify/uploadify.swf");?>',
				    	'uploader'    		: '<?php echo $this->baseUrl($this->currentController . '/uploadavatar'); ?>',
					    'buttonImage' 		: '<?php echo $this->baseUrl(PUBLIC_PATH . "/scripts/uploadify/browse-btn.png"); ?>',
					    'uploadFolder' 		: '<?php echo $this->baseUrl(PUBLIC_IMG_URL . "/tmp"); ?>',
				        'multi'     		: false,
				        'auto'      		: true,
				        'fileTypeDesc' 		: 'Image Files',
				        'fileTypeExts' 		: '*.gif; *.jpg; *.jpeg; *.png', 
				        'onUploadStart'		: function(file) {
				        	fileName = $('#hidden_hinh_anh').val();
				        	if (fileName != '') {
				        		$.ajax({
				    				'url' 	: '/member/deleteimage',
				    				'type' 	: 'post',
				    				'data' 	: {'imgUrl' : 'thumb_images_64x64', 'filename' : fileName}
				    			});
				        	}
				        },
			        	'onUploadSuccess' 	: function(file, data, response) {
			        		img = imgUrl + "/thumb_images_64x64/" + data;
				        	$('#thumbnail').attr("src", img);
				        	$('#hidden_hinh_anh').val(data);
				        	$('#hinh_anh').val(file.name);
			         	}
					});
				});
			</script>
			<table class="info">
				<tbody>
					<tr>
						<th><label class="required">Username</label></th>
						<td><label><?php echo $profile->username; ?></label></td>
					</tr>
					<tr>
						<th><label class="required">Email</label></th>
						<td><label><?php echo $profile->email; ?></label></td>
					</tr>
					<tr>
						<th><label class="required">Họ tên</label></th>
						<td><label><?php echo $profile->ho_ten; ?></label></td>
					</tr>
					<tr>
						<th><label class="required">Ngày sinh</label></th>
						<td><label><?php echo $profile->getNgay_sinh('d-m-Y'); ?></label></td>
					</tr>
					<tr>
						<th><label class="required">Địa chỉ</label></th>
						<td><label><?php echo $profile->dia_chi; ?></label></td>
					</tr>
					<tr>
						<th><label class="required">Thành phố</label></th>
						<td><label><?php echo $profile->getThanhPhoObj()->ten; ?></label></td>
					</tr>
					<tr>
						<th><label class="required">Điện thoại</label></th>
						<td><label><?php echo $profile->dien_thoai; ?></label></td>
					</tr>
					<tr>
						<th><label class="required">Giới tính</label></th>
						<td>
							<label>
								<?php 
									switch ($profile->getGioi_tinh()) {
										case 0:
											echo 'Nam';
										break;
										
										case 1:
											echo 'Nữ';
										break;
									}
								?>
							</label>
						</td>
					</tr>
				</tbody>
				<tfoot>
					<tr>
						<td colspan="2">
							<button id="change_pass" class="btn btn-primary" onclick="changePassClick()" >Đổi mật khẩu</button>
							<button class="btn btn-primary" data-toggle="modal" onclick="editProfileClick()" >Chỉnh sửa</button>
						</td>
					</tr>
				</tfoot>
			</table>
			<img id="user_avatar" class="images-upload" src="<?php echo $this->baseURL(PUBLIC_IMG_URL . "/user/user/avatars/" . $profile->hinh_anh); ?>" />
			<br />
		</div>
	</div>
	
	<!-- Chỉnh sửa thông tin profile -->
	<div id="editModal" class="modal customize-modal hide fade" tabindex="-1"
		role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal"
				aria-hidden="true">×</button>
			<h3 id="myModalLabel">Chỉnh sửa thông tin cá nhân</h3>
		</div>
		<div class="modal-body">
			<div id="editalert" class="alert"></div>
			<?php echo '<form id="' . $frm_user->getId() . '" method="' . $frm_user->getMethod() . '" action="" enctype="' . $frm_user->getEnctype() . '" name="' . $frm_user->getName() . '">'; ?>
				<div class="control-group">
					<?php echo $frm_user->ho_ten;?>
				</div>
				<div class="control-group">
					<?php echo $frm_user->hinh_anh;?>
				</div>
				<div class="control-group">
					<?php echo $frm_user->gioi_tinh;?>
				</div>
				<div class="control-group">
					<?php echo $frm_user->ngay_sinh;?>
				</div>
				<div class="control-group">
					<?php echo $frm_user->dia_chi;?>
				</div>
				<div class="control-group">
					<?php echo $frm_user->thanh_pho;?>
				</div>
				<div class="control-group">
					<?php echo $frm_user->dien_thoai;?>
				</div>
				<div class="clear"></div>
			<?php echo '</form>'; ?>
		</div>
		<div class="modal-footer">
			<button id="editbtn" class="btn btn-primary">Chỉnh sửa</button>
			<button class="btn" data-dismiss="modal" aria-hidden="true">Hủy</button>
		</div>
	</div>
	
	<!-- Thay đổi password -->
	<div id="changePassModal" class="modal hide fade" tabindex="-1"
		role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal"
				aria-hidden="true">×</button>
			<h3 id="myModalLabel">Chỉnh sửa thông tin cá nhân</h3>
		</div>
		<div class="modal-body">
			<div id="changepassalert" class="alert"></div>
			<?php echo '<form id="' . $frm_change_pass->getId() . '" method="' . $frm_change_pass->getMethod() . '" action="" enctype="' . $frm_change_pass->getEnctype() . '" name="' . $frm_change_pass->getName() . '">'; ?>
				<div class="control-group">
					<?php echo $frm_change_pass->oldpassword; ?>
				</div>
				<div class="control-group">
					<?php echo $frm_change_pass->newpassword; ?>
				</div>
				<div class="control-group">
					<?php echo $frm_change_pass->cfrmpassword; ?>
				</div>
				<div class="clear"></div>
			<?php echo '</form>'; ?>
		</div>
		<div class="modal-footer">
			<button id="changepassbtn" class="btn btn-primary">Thay đổi</button>
			<button class="btn" data-dismiss="modal" aria-hidden="true">Hủy</button>
		</div>
	</div>
	<br class="clear" />
</div>
<script type="text/javascript">
	//Catch click event of the edit button
	$('#editbtn').click(function(e) {
		editProcess(e);
	});

	//Process edit function
	function editProcess(event) {
		var url = '/member/profile';
		var postData = $("#editModal form").serializeObject();
		postData.format = "json";
    	$('#editbtn').attr("disabled", "disabled");
		var isValid = true;
		$('#editModal').find("input, select").each(function() {
			var inputid = $(this).attr('id');
			isValid = isValid && doValidation('editModal',inputid,'/member/validateformuser',null);
	    });
		if(isValid) {
			$.ajax({
	            type: 'POST',
	            url: url,
	            async: false,
	            cache: true,
	            data: postData,
	            dataType: postData.format,
	            success: function(data){
	            	if(data.edit) {
	            		setTimeout(function() {
							$('#editModal').modal('hide'); 
						}, 100);
	            	} else {
	            		if(data.message) {
	                		$('#editalert').html(data.message);
	                		$('#editalert').show();
	                    }
	                }
					window.location.reload();
	            }
	        });
		}
    	$('#editbtn').removeAttr("disabled");
	}

	$(function(){
		$('#editModal').find("input, select").each(function() {
	        var inputid = $(this).attr('id');
	        $("#" + inputid).blur(function() {
	        	if(doValidation('editModal', inputid, '/member/validateformuser', null))
	        		$("#editbtn").removeAttr("disabled");
	        	else
	        		$("#editbtn").attr("disabled", "disabled");	
	        });
	    });
	});
	
	function doValidation(modal, id, url, action) {
		$('#' + modal).find('.alert').hide();
	    var data = {};
	    var isValid = true;
	    $('#' + modal).find("input").each(function() {
	        data[$(this).attr('name')] = $(this).val();
	    });
	    $('#' + modal).find("select").each(function() {
	        data[$(this).attr('name')] = $(this).val();
	    });
	    if(action){
		    data['action_type'] = 'validate';
		}
	    $.ajax({
            type: 'POST',
            url: url,
            async: false,
            cache: true,
            data: data,
            dataType: 'json',
            success: function(resp){
            	$('#' + modal).find("#" + id).parent().find('.errors').remove();
            	$('#' + modal).find("#" + id).parent().append(getErrorHtml(resp[id], id));
    	    	if(getErrorHtml(resp[id], id))
        	    	isValid = false;
            }
        });
        
	    return isValid;
	}

	//Show the modal event processing
	$('#editModal').on('show', function () {
		$('#editalert').hide();
		$('#email').parent().find('.errors').remove();
		$('#ho_ten').parent().find('.errors').remove();
		$('#dia_chi').parent().find('.errors').remove();
		$('#thanh_pho').parent().find('.errors').remove();
		$('#dien_thoai').parent().find('.errors').remove();
	});
	
	//show modal
	function editProfileClick() {
		$('#editModal').modal('show');
	}
	
	//Catch click event of the edit button
	$('#changepassbtn').click(function(e) {
		changePassProcess(e);
	});

	//Process edit function
	function changePassProcess(event) {
		var url = '/member/changepassword';
		var postData = $("#changePassModal form").serializeObject();
		postData.format = "json";
    	$('#changepassbtn').attr("disabled", "disabled");
		var isValid = true;
		$('#changePassModal').find("input").each(function() {
			var inputid = $(this).attr('id');
			isValid = isValid && doValidation('changePassModal',inputid,'/member/validateformchangepass',null);
	    });
		if(isValid) {
			$.ajax({
	            type: 'POST',
	            url: url,
	            async: false,
	            cache: true,
	            data: postData,
	            dataType: postData.format,
	            success: function(data) {
	            	if(data.edit) {
	            		setTimeout(function() {
							$('#changePassModal').modal('hide'); 
						}, 100);
	            		$('#changePassModal').find('form')[0].reset();
	            	} else {
	            		if(data.message) {
	                		$('#changepassalert').html(data.message);
	                		$('#changepassalert').show();
	                    }
	                }
	            }
	        });
		}
    	$('#changepassbtn').removeAttr("disabled");
	}

	$(function(){
		$('#changePassModal').find("input").each(function() {
	        var inputid = $(this).attr('id');
	        $("#" + inputid).blur(function() {
	        	if(doValidation('changePassModal', inputid, '/member/validateformchangepass', null))
	        		$("#changepassbtn").removeAttr("disabled");
	        	else
	        		$("#changepassbtn").attr("disabled", "disabled");	
	        });
	    });
	});

	//Show the modal event processing
	$('#changePassModal').on('show', function () {
		$('#changepassalert').hide();
		$('#oldpassword').parent().find('.errors').remove();
		$('#newpassword').parent().find('.errors').remove();
		$('#cfrmpassword').parent().find('.errors').remove();
	});

	//show modal
	function changePassClick() {
		$('#changePassModal').modal('show');
	}
</script>